<template>
	<view class="page">
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px)" :show-scrollbar="false">
			<!-- <view class="fixed-title text-center pt-2 pb-2 font-14 text-white">我的</view> -->
			<view class="bg-linear-gradient" >
				<view v-if="loginStatus">
					<free-list-item :border="false" @click="opens('tabbar/user/user',userInfo.id)"
						title="xgw" coverSize="100" showRight showLeftIcon :showRights="false">
						<u-image  :src="getFullImageUrl(ifdUser.avatar)" border-radius="100rpx"
							style="width: 60px; height: 60px; margin-right: 10px;" @error="handleImageError"></u-image>
						<view class="flex flex-column" >
							<view class="text-dark font-16 wrap">{{ifdUser.username || '-'}}</view>
							<view class="text-hover-dark font-14 mt-2">{{ifdUser.phone || '-'}}</view>
						</view>
					</free-list-item>
					<view class="pl-3 pr-3 dfex">
						<view class="dfes font-12 text-FFC251" @click="opens('tabbar/user/tag',userInfo.id)">
							<view class="dfes" v-for="(item, index) in label.slice(0, 3)" :key="index">
								<view class=" mr-2">{{item}}</view>
							</view>
							<view class="iconfont icon-icon-arrow-right2 font-12"></view>
						</view>
					</view>
				</view>
				<view class="pl-3 dfes pb-5" v-if="!loginStatus" @click="open('login/login')">
					<text class="iconfont icon-wode2 font-48 text-white"></text>
					<text class="sign pl-2 font-16">登录/注册</text>
				</view>
				<view class="pl-3 pr-3 show-ls ml-3 mr-3 position-absolute left-0 right-0 mt-4">
					<view class="lineHight-3">我的数据</view>
					<view class="dfex text-center pb-3">
						<view @click="open('tabbar/order/demand?status=1')">
							<view class="font-20 text-333333 font-weight-bold">{{myOrderTotal}}</view>
							<view class="text-999999">需求发布</view>
						</view>
						<view @click="open('tabbar/order/demand?status=0')">
							<view class="font-20 text-333333 font-weight-bold">{{orderListTotal}}</view>
							<view class="text-999999">需求订单</view>
						</view>
						<view @click="open('tabbar/user/follow')">
							<view class="font-20 text-333333 font-weight-bold">{{followTotal}}</view>
							<view class="text-999999">我的关注</view>
						</view>
					</view>
				</view>
			</view>

			<view class="mt-105 bg-white">
				<free-divider></free-divider>
				<free-divider></free-divider>
				<free-divider></free-divider>
				<free-list-item title="基础信息" showLeftIcon :showRight="false" :border="false"
					@click="opens('tabbar/user/basic',userInfo.id)">
					<text slot="icon" class="iconfont font-lg py-1 icon-jichuguanli1"></text>
				</free-list-item>
				<free-divider></free-divider>
				<free-list-item title="我的证件" showLeftIcon :showRight="false"
					@click="open('tabbar/user/identification')">
					<text slot="icon" class="iconfont font-lg py-1 icon-idcard-examine"></text>
				</free-list-item>
				<free-list-item title="服务码" showLeftIcon :showRight="false"
					@click="opens('tabbar/user/BrandCode',userInfo.id)">
					<text slot="icon" class="iconfont font-lg py-1 icon-chanpinmaguanli"></text>
				</free-list-item>
				<free-list-item title="我的关注" showLeftIcon :showRight="false" @click="open('tabbar/user/follow')">
					<text slot="icon" class="iconfont font-lg py-1 icon-guanzhuderen2"></text>
				</free-list-item>
				<free-list-item title="产品信息推送" showLeftIcon :showRight="false" :tag="tagAsString" :showTag="true"
					@click="open('tabbar/user/InformationPush')">
					<text slot="icon" class="iconfont font-lg py-1 icon-chanpin1"></text>
				</free-list-item>
				<free-list-item title="订单评价" showLeftIcon :showRight="false" @click="open('tabbar/user/evaluation')">
					<text slot="icon" class="iconfont font-lg py-1 icon-dingdan"></text>
				</free-list-item>
				<free-list-item title="退出登录" showLeftIcon :showRight="false" @click="update">
					<text slot="icon" class="iconfont font-lg py-1 icon-tuichu"></text>
				</free-list-item>
			</view>
		</scroll-view>
		<free-confirm ref="confirm" :title="confirmTitle">
			<view class="iconfont icon-tuichu text-center font-48 text-A0A0A0"></view>
		</free-confirm>
	</view>
</template>

<script>
	import freeListItem from '@/components/free-ui/free-list-item.vue'
	import freeDivider from '@/components/free-ui/free-divider.vue'
	import freeConfirm from '@/components/free-ui/free-confirm.vue'
	import $H from '@/common/free-lib/request.js'
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	import Follow from './follow.vue'
	export default {
		components: {
			freeListItem,
			freeDivider,
			freeConfirm,
		},
		data() {
			return {
				confirmText: '',
				confirmType: '',
				loginStatus: false,
				userInfo: '',
				tagList: '',
				myOrderTotal: 0,
				orderListTotal: 0,
				followTotal: 0,
				label: [],
				total: 0,
				ifdUser:''
			}
		},
		onShow() {
			let store = uni.getStorageSync('userInfo')
			if (store) {
				this.loginStatus = true
				this.userInfo = store
			}
			this.NewUser(store.id)
			this.getTagList();
			this.theOrderList();
			this.getList()
		},
		created() {
		
		},
		computed: {
			confirmTitle() {
				return this.confirmType == 'username' ?
					'是否退出登录！' :
					'是否退出登录！'
			},
			tagAsString() {
			  return String(this.total);  
			}  
		},
		
		
		methods: {
			handleImageError() {
				uni.showToast({
					title: '图片格式不支持jpeg，请重新上传',
					icon: 'none',
					duration: 4000
				});
			
			},
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			// 退出登录
			logout() {
				return $H.get('/brand/user/down/logout', {}, {});
			},

			update() {
				this.$refs.confirm.show((close) => {
					this.logout()
						.then(() => {
							uni.removeStorageSync('token'); // 清除缓存中的 token
							uni.navigateTo({
								url: '/pages/login/login'
							});
							uni.showToast({
								title: '退出成功',
								icon: 'none',
							})
						})
						.catch(error => {
							uni.showToast({
								title: "网络错误，请稍后再试",
								icon: 'none'
							});
						})
						.finally(() => {
							close(); // 关闭确认弹框
						});
				});
			},

			open(path) {
				uni.navigateTo({
					url: '/pages/' + path,
				})
			},
			opens(path, id) {
				uni.navigateTo({
					url: '/pages/' + path + '?id=' + id
				})
			},
			getTagList() {
				$H.get(
					`/down/downMarketLabel/list`, {
						downUserId: this.userInfo.id
					}, {
						token: true
					}
				).then((res) => {
					
				})
			},
			theOrderList() {
				$H.get(
					`/down/downServiceOrder/down/list`, {}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					}
				).then((res) => {
					this.orderListTotal = res.result.total
				})
				$H.get(
					`/down/downMarketDemand/down/list`, {}, {
						token: true,
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					}
				).then((res) => {
					this.myOrderTotal = res.result.total
				})
				$H.get(`/brand/user/down/myFollowList`, {}, {
					token: true
				}).then(
					(res) => {
						this.followTotal = res.result.total
					}
				)
				// 标签
				$H.get('/down/downMarketLabel/mobile/downById', {}, {}).then(res => {
					this.label = res.result.labelList
				}).catch(error => {
					console.log(error)
				});
			},
			getList() {
				// TODO: 产品信息推送数据对接
				$H.get(
					`/agriculture/productInform/down/PushInformList`, {}, {
						token: true
					}
				).then((res) => {
					this.total = res.result.total
				})
			},
			
			NewUser(id) {
				$H.get('/brand/user/queryById', {
					id: id
				}, {}).then(res => {
					this.ifdUser = res.result
					this.id = res.result.id
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		font-size: 16px;
		cursor: pointer;
		position: relative;
	}

	.tab-item.active {
		font-size: 16px;
		color: #ffc251;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #ffc251;
	}

	.index-color-1 {
		font-size: 22px;
		color: #ff0000;
	}

	.index-color-2 {
		font-size: 22px;
		color: #17a2b8;
	}

	.index-color-3 {
		font-size: 22px;
		color: #ffc251;
	}
</style>